/* Teton Trading — shared styles for all pages */

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: #fafafa;
  color: #333;
  padding: 24px;
}

/* --- Typography --- */
h1 { font-size: 1.5rem; margin-bottom: 4px; }
.caption { color: #888; font-size: 0.85rem; margin-bottom: 16px; }
.section-title { font-weight: 600; font-size: 0.9rem; margin: 20px 0 6px; }
.section-label { font-weight: 600; font-size: 0.85rem; margin: 12px 0 6px; }

/* --- Navigation --- */
a.back { font-size: 0.85rem; color: #636EFA; text-decoration: none; }

/* --- Layout --- */
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.col { flex: 1; min-width: 130px; }
.col-half { flex: 0 0 calc(50% - 6px); }
hr { border: none; border-top: 1px solid #ddd; margin: 20px 0; }

/* --- Form controls --- */
label { display: block; font-size: 0.8rem; font-weight: 500; margin-bottom: 3px; color: #555; }
select {
  width: 100%; padding: 6px 8px;
  border: 1px solid #ccc; border-radius: 4px;
  font-size: 0.9rem; background: #fff;
}
select:focus { outline: none; border-color: #636EFA; }
select[multiple] { height: 66px; }
input[type=number] {
  width: 100%; padding: 6px 8px;
  border: 1px solid #ccc; border-radius: 4px;
  font-size: 0.9rem; background: #fff;
}
input:focus { outline: none; border-color: #636EFA; }

/* --- Tables --- */
table { width: max-content; min-width: 100%; border-collapse: collapse; font-size: 0.8rem; margin-bottom: 12px; }
th, td { padding: 4px 8px; text-align: right; border-bottom: 1px solid #eee; white-space: nowrap; }
th { font-weight: 600; color: #555; border-bottom: 2px solid #ddd; position: sticky; top: 0; background: #fafafa; z-index: 1; }
td:first-child, th:first-child { text-align: left; position: sticky; left: 0; background: #fafafa; z-index: 1; }
th:first-child { z-index: 2; }
.table-wrap { max-height: 310px; overflow: auto; }
.predicted { background-color: #FFFFCC; }

/* --- CSV download button --- */
.csv-btn {
  float: right; font-size: 0.75rem; padding: 3px 8px;
  border: 1px solid #ccc; border-radius: 3px;
  background: #fff; cursor: pointer; margin-bottom: 4px;
}
.csv-btn:hover { background: #f0f0f0; }

/* --- Charts --- */
.chart { width: 100%; }

/* --- Loading / timing --- */
#loading { text-align: center; padding: 60px; color: #888; font-size: 1.1rem; }
#app { display: none; }
.timing { font-size: 0.75rem; color: #aaa; margin-top: 4px; }

/* --- Tabs --- */
.tabs { display: flex; gap: 0; margin: 16px 0 12px; border-bottom: 2px solid #ddd; }
.tab {
  padding: 8px 20px; cursor: pointer; font-size: 0.9rem;
  color: #888; border-bottom: 2px solid transparent; margin-bottom: -2px;
}
.tab.active { color: #333; font-weight: 600; border-bottom-color: #636EFA; }
.tab-content { display: none; }
.tab-content.active { display: block; }

/* --- Metrics row --- */
.metrics { display: flex; gap: 24px; margin: 12px 0; }
.metric { text-align: center; }
.metric .label { font-size: 0.75rem; color: #888; }
.metric .value { font-size: 1.2rem; font-weight: 600; }

/* --- Description text --- */
.description { font-size: 0.85rem; margin: 12px 0; line-height: 1.5; }
.description strong { color: #555; }
.note { font-size: 0.8rem; color: #888; margin-bottom: 12px; }