/* ETF Directory — group/table/fund-name styles for the directory on the
   landing page (index.html). Kept as its own file alongside etf-home.css,
   which holds the chips, sparklines and range bars. */

.status-line { font-size: 12px; color: var(--text3); font-family: 'JetBrains Mono', monospace; margin-bottom: 4px; }

.etf-group { margin-bottom: 8px; }
.etf-group summary {
  font-family: 'Space Grotesk', sans-serif; font-size: 16px; margin: 32px 0 12px; color: var(--text1);
  border-left: 3px solid var(--accent); padding-left: 10px; cursor: pointer; list-style: none;
  display: flex; align-items: center; gap: 10px; user-select: none;
}
.etf-group summary::-webkit-details-marker { display: none; }
.etf-group summary::before { content: '▸'; color: var(--text3); font-size: 12px; transition: transform .15s; }
.etf-group[open] summary::before { transform: rotate(90deg); }
.etf-group:first-of-type summary { margin-top: 8px; }
.etf-count { font-size: 11px; font-weight: 400; color: var(--text3); font-family: 'JetBrains Mono', monospace; }

.group-controls { display: flex; gap: 8px; margin-top: 4px; }
.group-controls button {
  font-size: 11px; font-family: 'JetBrains Mono', monospace; color: var(--text2); background: var(--card);
  border: 1px solid var(--border); border-radius: 6px; padding: 5px 10px; cursor: pointer;
}
.group-controls button:hover { border-color: var(--accent); color: var(--text1); }

.data-table th, .data-table td { text-align: left; }
.data-table th.r, .data-table td.r { text-align: right; }
.fund-name { font-weight: 600; }
.fund-name a { color: inherit; text-decoration: none; }
.fund-name a:hover { text-decoration: underline; }
.fund-ticker { color: var(--text3); font-family: 'JetBrains Mono', monospace; font-size: 11px; margin-left: 6px; }

.price-cell { font-family: 'JetBrains Mono', monospace; font-weight: 700; white-space: nowrap; }
.range-cell { min-width: 150px; }
.range-labels { display: flex; justify-content: space-between; font-size: 10px; color: var(--text2); font-family: 'JetBrains Mono', monospace; margin-bottom: 3px; }
.range-track { width: 100%; height: 4px; background: var(--border); border-radius: 2px; position: relative; }
.range-marker { width: 8px; height: 8px; background: var(--accent); position: absolute; top: -2px; border-radius: 50%; transform: translateX(-50%); }
.quote-na { color: var(--text3); font-style: italic; font-size: 11px; }

/* 10-year range column -- same bar pattern as 52W, kept as its own
   separate column rather than touching the 52W one. */
.ten-yr-cell { min-width: 150px; }
.ten-yr-marker { background: var(--text1); }
.ten-yr-compare { font-size: 10px; color: var(--text2); font-family: 'JetBrains Mono', monospace; margin-top: 4px; white-space: nowrap; }

/* 10-year return bar -- diverging (can extend left or right of a
   computed zero-point), single neutral color, no red/green (matches
   the rest of the site: sign in the number carries direction). */
.return-cell { min-width: 130px; }
.return-track { width: 100%; height: 8px; background: var(--border); border-radius: 2px; position: relative; margin-bottom: 4px; }
.return-zero { position: absolute; top: -2px; bottom: -2px; width: 1px; background: var(--text3); }
.return-bar { position: absolute; top: 0; bottom: 0; background: var(--text1); border-radius: 2px; min-width: 1px; }
.return-label { font-size: 12px; font-weight: 700; font-family: 'JetBrains Mono', monospace; color: var(--text1); }