.controls { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; flex-wrap: wrap; gap: 12px; }

.chart-toggle {
  display: flex; gap: 2px;
  background: var(--text-06); border: 1px solid var(--text-11);
  border-radius: 8px; padding: 3px;
}
.chart-toggle[hidden] { display: none; }
.toggle-btn {
  background: none; border: 1px solid transparent;
  color: var(--muted); font-family: var(--serif); font-size: 0.82rem;
  padding: 5px 18px; border-radius: 6px; cursor: pointer;
  transition: background 0.18s, color 0.18s, border-color 0.18s, opacity 0.18s;
  letter-spacing: 0.02em; white-space: nowrap;
}
.toggle-btn:hover { color: var(--text); }
.toggle-btn.active { background: rgba(217,119,87,0.18); color: var(--rust); border-color: rgba(217,119,87,0.32); }
.toggle-btn.dimmed { opacity: 0.30; pointer-events: none; }

/* Custom-range gear (mobile only) */
.range-gear {
  display: none; background: none; border: 1px solid transparent;
  color: var(--muted); padding: 4px 8px; border-radius: 20px; cursor: pointer;
  align-items: center; transition: color 0.16s, border-color 0.16s;
}
.range-gear:hover { color: var(--text); border-color: var(--text-16); }
.range-gear.active { color: var(--rust); border-color: rgba(217,119,87,0.36); background: rgba(217,119,87,0.09); }

/* Custom date range modal */
.date-backdrop {
  position: fixed; inset: 0; background: rgba(20,18,16,0.72);
  display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity 0.22s; z-index: 100;
}
.date-backdrop.open { opacity: 1; pointer-events: all; }
.date-box {
  background: var(--bg); border: 1px solid var(--text-14);
  border-radius: 18px 18px 0 0; padding: 22px 20px calc(22px + env(safe-area-inset-bottom));
  width: 100%; max-width: 480px; transform: translateY(20px); transition: transform 0.22s;
  font-family: var(--serif); overflow: hidden;
}
.date-backdrop.open .date-box { transform: translateY(0); }
.date-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.date-title { font-size: 1.05rem; font-weight: 700; color: var(--text); }
.date-close { background: none; border: none; color: var(--muted); font-size: 1.1rem; cursor: pointer; padding: 4px 8px; }
.date-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; min-width: 0; }
.date-field span { font-size: 0.78rem; color: var(--muted); letter-spacing: 0.04em; }
.date-field input {
  -webkit-appearance: none; appearance: none;
  background: var(--text-06); border: 1px solid var(--text-15);
  border-radius: 12px; padding: 12px 14px; color: var(--text);
  font-family: var(--serif); font-size: 1rem;
  display: block; width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box;
  color-scheme: dark; text-align: left;
}
/* iOS renders the value inside a positioned wrapper — keep it inside the field */
.date-field input::-webkit-date-and-time-value { text-align: left; margin: 0; }
.date-field input:focus { outline: none; border-color: rgba(217,119,87,0.5); }
/* Start = sage green, End = ochre yellow */
.date-field-start > span { color: var(--sage); }
.date-field-start input { border-color: rgba(142,158,130,0.4); background: rgba(142,158,130,0.08); }
.date-field-start input:focus { border-color: var(--sage); }
.date-field-end > span { color: var(--ochre); }
.date-field-end input { border-color: rgba(238,180,121,0.4); background: rgba(238,180,121,0.08); }
.date-field-end input:focus { border-color: var(--ochre); }
.date-actions { display: flex; gap: 10px; margin-top: 8px; }
.date-btn-secondary, .date-btn-primary {
  flex: 1; padding: 13px; border-radius: 12px; font-family: var(--serif);
  font-size: 0.92rem; cursor: pointer; border: 1px solid;
}
.date-btn-secondary { background: none; border-color: var(--text-18); color: var(--muted); }
.date-btn-primary { background: rgba(217,119,87,0.9); border-color: var(--rust); color: #2C2825; font-weight: 700; }
@media (min-width: 641px) { .date-backdrop { align-items: center; } .date-box { border-radius: 18px; } }

/* Table view */
#table-view { display: none; padding: 0 0 32px; }
#table-view.active { display: block; }
.tv-section { margin-bottom: 36px; }
.tv-heading { font-family: var(--serif); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sage); margin: 0 0 10px; }
.tv-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tv-table { width: max-content; min-width: 100%; border-collapse: collapse; font-family: var(--serif); font-size: 0.84rem; }
.tv-table th { text-align: left; padding: 5px 12px 8px; border-bottom: 1px solid var(--text-12); color: var(--text-45); font-size: 0.72rem; font-weight: 400; letter-spacing: 0.06em; white-space: nowrap; }
.tv-table th:not(:first-child) { text-align: right; }
.tv-table td { padding: 7px 12px; color: var(--text); border-bottom: 1px solid var(--text-05); white-space: nowrap; }
.tv-table td:not(:first-child) { text-align: right; }
.tv-table th:first-child, .tv-table td:first-child { position: sticky; left: 0; background: var(--bg); }
.tv-table tr:last-child td { border-bottom: none; }
.tv-table tr:hover td { background: var(--text-04); }
.tv-table tr:hover td:first-child { background: var(--bg); box-shadow: inset 0 0 0 999px var(--text-04); }
.tv-pos { color: var(--sage); }
.tv-neg { color: var(--rust); }
.tv-muted { color: var(--text-35); }
.tv-ticker-block { margin-bottom: 28px; }
.tv-ticker-label { font-family: var(--serif); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; margin: 0 0 8px; }
.tv-ticker-label.sel-0, .tv-table th.sel-0, .tv-table td.sel-0 { color: var(--rust); }
.tv-ticker-label.sel-1, .tv-table th.sel-1, .tv-table td.sel-1 { color: var(--ochre); }
.tv-ticker-label.sel-2, .tv-table th.sel-2, .tv-table td.sel-2 { color: var(--sage); }
.tv-source { font-family: var(--serif); font-size: 0.72rem; color: var(--text-35); margin-top: 20px; font-style: italic; }
.tv-growth { font-size: 0.72em; margin-top: 2px; opacity: 0.85; }


.range-group { display: flex; align-items: center; gap: 4px; }
.range-btn {
  background: none; border: 1px solid transparent;
  color: var(--muted); font-family: var(--serif); font-size: 0.80rem;
  padding: 4px 13px; border-radius: 20px; cursor: pointer;
  transition: background 0.16s, color 0.16s, border-color 0.16s; letter-spacing: 0.03em;
}
.range-btn:hover { color: var(--text); border-color: var(--text-16); }
.range-btn.active { color: var(--rust); border-color: rgba(217,119,87,0.36); background: rgba(217,119,87,0.09); }