/* indexflow.css — layout of the Index options flow page only (colours and type are common.css) */
.bar{display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center;margin:22px 0 14px}
.bar .lab{color:var(--muted);font-size:.78rem;text-transform:uppercase;letter-spacing:.07em;margin-right:8px}
.ixf-state{margin:6px 0 16px;padding:10px 14px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--text-2);font-size:.92rem}
.ixf-state b{color:var(--text)}
.ixf-state.warn{border-color:rgba(255,181,71,.45)}
.ixf-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:18px}
.ixf-tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px}
.ixf-tile .k{color:var(--muted);font-size:.74rem;text-transform:uppercase;letter-spacing:.07em}
.ixf-tile .v{font-size:1.45rem;font-weight:600;font-variant-numeric:tabular-nums;margin-top:2px}
.ixf-tile .s{color:var(--muted);font-size:.78rem;margin-top:2px}
.ixf-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media (max-width:760px){.ixf-grid{grid-template-columns:1fr}}
.ixf-chart{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px 10px;position:relative}
.ixf-chart h3{margin:0;font-size:1rem;font-weight:600}
.ixf-chart .sub{color:var(--muted);font-size:.8rem;margin:2px 0 6px}
.ixf-chart svg{display:block;width:100%;height:190px;overflow:visible}
.ixf-chart .empty{height:190px;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:.9rem;text-align:center;padding:0 20px}
.ixf-chart .grid{stroke:var(--line);stroke-width:1}
.ixf-chart .ax{fill:var(--muted);font-size:11px;font-variant-numeric:tabular-nums}
.ixf-chart .zero{stroke:var(--line-2);stroke-width:1}
.ixf-chart .ln{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.ixf-chart .cross{stroke:var(--line-2);stroke-width:1}
.ixf-tip{position:absolute;pointer-events:none;background:var(--surface-2);border:1px solid var(--line-2);border-radius:8px;padding:6px 9px;font-size:.8rem;line-height:1.35;white-space:nowrap;z-index:3;display:none}
.ixf-tip b{display:block;color:var(--text)}
.ixf-tip i{color:var(--muted);font-style:normal}
.ixf-tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.ixf-table{border-collapse:collapse;width:100%;font-size:.84rem;font-variant-numeric:tabular-nums}
.ixf-table th,.ixf-table td{padding:6px 10px;text-align:right;white-space:nowrap;border-bottom:1px solid var(--line)}
.ixf-table th{color:var(--muted);font-weight:500;position:sticky;top:0;background:var(--surface)}
.ixf-table th:first-child,.ixf-table td:first-child{text-align:left}
.ixf-table tr.fill td{color:var(--muted)}
.how{margin:28px 0 8px}
.how summary{cursor:pointer;color:var(--accent);font-weight:600}
.how div{margin-top:10px;max-width:780px}
.how p{margin:.7rem 0}