* { box-sizing: border-box; }
body { margin: 0; font-family: sans-serif; color: #1f2937; background: #f9fafb; }

/* ---------- Header bar: title on the left, menu on the right ---------- */
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 24px;
  background: #1f2937;
  color: white;
}
header h1 { margin: 0; font-size: 24px; }
header h1 a { color: white; text-decoration: none; }

/* ---------- Menu ---------- */
.menu { position: relative; }

.menu-button {
  background: none;
  border: 1px solid #6b7280;
  color: white;
  font-size: 16px;
  padding: 8px 14px;
  border-radius: 6px;
  cursor: pointer;
}
.menu-button:hover { background: #374151; }
/* the language select, next to "Menu" (added by i18n.js) */
.header-actions { display: flex; align-items: center; gap: 10px; }
.lang-select {
  background: #1f2937; border: 1px solid #6b7280; color: white; font-size: 15px;
  padding: 7px 10px; border-radius: 6px; cursor: pointer;
}
.lang-select:hover { background: #374151; }

.menu-list {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 160px;
  margin: 0;
  padding: 6px 0;
  list-style: none;
  background: white;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  z-index: 10;
}
.menu-list.open { display: block; }

.menu-list a {
  display: block;
  padding: 10px 16px;
  color: #1f2937;
  text-decoration: none;
}
.menu-list a:hover { background: #e5e7eb; }

/* ---------- Page content ---------- */
main { max-width: 900px; margin: 24px auto; padding: 0 16px; }

table {
  width: 100%;
  border-collapse: collapse;
  background: white;
  border: 1px solid #d1d5db;
  margin-bottom: 24px;
}
th, td { padding: 10px 14px; text-align: left; border-bottom: 1px solid #e5e7eb; }
th { background: #f3f4f6; font-size: 14px; }
/* equity curve title, with the currency select on the right */
/* the title's text wraps, so the selects stay put on the right when the title gets longer (e.g. real returns) */
.chart-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.chart-head > span { flex: 1 1 auto; min-width: 0; padding-top: 6px; } /* in line with the selects' text */
.chart-head > .chart-options { flex: none; }
@media (max-width: 700px) {
  .chart-head { flex-wrap: wrap; }
}
.currency-pick { display: flex; align-items: center; gap: 6px; font-weight: normal; font-size: 13px; color: #4b5563; }
/* Front page */
.home { max-width: 1400px; }
/* the main content on the left, the fee example and who is behind the site on the right */
.home-columns { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; }
.home-main { min-width: 0; }
.home-scroll { overflow-x: auto; } /* the scoreboard scrolls sideways on a phone, not the page */
@media (max-width: 1000px) {
  .home-columns { grid-template-columns: minmax(0, 1fr); }
}
.home-hero { padding: 28px 0 24px; }
.home-hero h2 { margin: 0 0 10px; font-size: 30px; line-height: 1.25; color: #111827; }
.home-hero p { margin: 0; max-width: 720px; font-size: 17px; line-height: 1.55; color: #4b5563; }
.home-more { font-size: 13px; font-weight: normal; color: #2563eb; text-decoration: none; white-space: nowrap; }
.home-more:hover { text-decoration: underline; }
/* the links wrap onto a second line (right-aligned) instead of running out of the box */
.home-more-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 14px; flex: 0 1 auto; }
.home-featured .chart-head { flex-wrap: wrap; }
.home-featured .chart-head > span:first-child { flex: 1 1 420px; }
.chart-head > .home-more-links { padding-top: 0; }
.home-featured .chart-head > span { padding-top: 0; }
.home-featured .chart-cell { height: 340px; }
.home-featured { width: 100%; table-layout: fixed; } /* the column sets the width, not the title or links */
.home-featured-stats .calc-summary { margin: 0 0 8px; }
/* no tile is the main result here, so none is highlighted */
.home-featured-stats .calc-tile:first-child { border-color: #d1d5db; }
.home-featured-stats .calc-tile:first-child strong { color: #111827; }
.home-featured-stats .calc-tile:first-child strong.negative { color: #b91c1c; }
.home-small { font-size: 12px; font-weight: normal; color: #6b7280; }
.calc-tile strong.negative, td.negative { color: #b91c1c; }
td.positive { color: #15803d; }
.home-table-title { font-size: 15px; }
.home-scoreboard a { color: #1f2937; font-weight: bold; text-decoration: none; }
.home-scoreboard a:hover { color: #2563eb; text-decoration: underline; }
.home-benchmark-row td { background: #f9fafb; color: #6b7280; font-style: italic; }
.home-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 24px; }
.home-card {
  display: flex; flex-direction: column; gap: 6px; padding: 16px; background: white;
  border: 1px solid #d1d5db; border-radius: 6px; color: #1f2937; text-decoration: none;
}
.home-card:hover { border-color: #2563eb; box-shadow: inset 3px 0 0 #2563eb; }
.home-card strong { font-size: 16px; }
.home-card span { font-size: 13px; line-height: 1.45; color: #6b7280; }
.home-pair { display: grid; grid-template-columns: 1fr; gap: 16px; position: sticky; top: 16px; }
@media (max-width: 1000px) {
  .home-pair { grid-template-columns: 1fr 1fr; position: static; }
}
.home-pair .about { margin-bottom: 0; }
@media (max-width: 1000px) {
  .home-pair .about { margin-bottom: 24px; }
}
.home-pair .about td { font-size: 14px; }
.home-pair .about p + p { margin-top: 8px; }
.home-pair a { color: #2563eb; }
@media (max-width: 700px) {
  .home-pair { grid-template-columns: 1fr; }
  .home-hero h2 { font-size: 24px; }
}
.site-footer {
  max-width: 1100px; margin: 8px auto 32px; padding: 16px; border-top: 1px solid #d1d5db;
  font-size: 12px; line-height: 1.5; color: #6b7280;
}
.site-footer p { margin: 0; }
.site-footer p + p { margin-top: 6px; }

/* About us page */
.about-page .about td { font-size: 15px; line-height: 1.6; }
.about-page .about p + p, .about-page .about p + ul, .about-page .about ul + p { margin-top: 10px; }
.about-page .about ul { margin: 6px 0 0; padding-left: 22px; }
.about-page .about li + li { margin-top: 4px; }
.about-page .about td { padding: 20px 24px; }
.about-page .about-example {
  padding: 10px 14px; background: #f9fafb; border-left: 3px solid #2563eb; border-radius: 0 6px 6px 0;
  font-size: 14px; color: #374151;
}
.about-page .about-start { margin-top: 18px; font-weight: bold; color: #1f2937; }
.about-page a { color: #2563eb; }

/* Calculators page */
.calc-inputs td { vertical-align: top; }
.calc-inputs th[colspan] { background: #f3f4f6; }
.unit-input { display: flex; align-items: center; gap: 4px; font-size: 14px; color: #4b5563; }
.calc-help { font-size: 13px; line-height: 1.45; color: #6b7280; }
.calc-notes { margin: 12px 0 0; }
.calc-section .run-button { margin-bottom: 4px; }
.calc-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 16px 0 24px; }
.calc-summary:empty { display: none; }
.calc-tile { padding: 12px 14px; background: white; border: 1px solid #d1d5db; border-radius: 6px; }
.calc-tile span { display: block; font-size: 13px; color: #6b7280; }
.calc-tile strong { display: block; margin-top: 4px; font-size: 20px; color: #111827; font-variant-numeric: tabular-nums; }
.calc-tile:first-child { border-color: #2563eb; }
.calc-tile:first-child strong { color: #2563eb; }

.chart-options { display: flex; flex-wrap: wrap; gap: 12px; }
#real { min-width: 11.5em; } /* the same width whichever option is chosen */
/* under the equity curve: reset zoom, and what the shading and zoom gestures mean */
.zoom-reset {
  margin-left: 8px; padding: 4px 10px; border: 1px solid #2563eb; border-radius: 6px;
  background: white; color: #2563eb; font-size: 13px; cursor: pointer; vertical-align: middle;
}
.zoom-reset:hover { background: #dbeafe; }
.zoom-hint { display: inline-flex; align-items: center; gap: 4px; margin-left: 12px; font-size: 12px; color: #6b7280; }
.recession-swatch { display: inline-block; width: 14px; height: 10px; background: rgba(107, 114, 128, 0.25); }
th select#currency, th select#real { width: auto; padding: 4px 8px; font-size: 14px; border: 1px solid #9ca3af; border-radius: 4px; background: white; }
td input, td select { width: 100%; padding: 8px; font-size: 15px; border: 1px solid #9ca3af; border-radius: 4px; }

.ticker-row { display: flex; gap: 4px; margin-top: 6px; }
.ticker-row button {
  border: 1px solid #9ca3af; background: white; border-radius: 4px; cursor: pointer; padding: 0 10px;
}
.ticker-row button:hover { background: #fee2e2; }
/* weights and rebalancing: only shown for the "Portfolio" strategy */
.weight-box, .weight-total, .rebalance { display: none; }
.portfolio-mode .weight-box { display: flex; align-items: center; gap: 2px; font-size: 14px; color: #4b5563; }
.portfolio-mode .weight-total, .portfolio-mode .rebalance { display: block; }
td input.weight-input { width: 72px; }
.weight-total { margin-top: 6px; font-size: 13px; color: #4b5563; }
.weight-total.bad { color: #b91c1c; font-weight: bold; }
.rebalance { margin-top: 8px; font-size: 14px; color: #4b5563; }
.rebalance-input { display: flex; align-items: center; gap: 6px; margin-top: 4px; white-space: nowrap; }
td .rebalance-input input { width: 64px; }
.ticker-row .row-spacer { visibility: hidden; }
.rebalance small { display: block; font-size: 12px; color: #6b7280; }
td select.method-select { margin-top: 4px; padding: 6px; font-size: 14px; }

/* momentum: the weights are chosen by the ranking, so the weight inputs are hidden */
.momentum-only { display: none; }
.portfolio-mode.momentum-mode .momentum-only { display: block; }
.portfolio-mode.momentum-mode .weight-box,
.portfolio-mode.momentum-mode .weight-total,
.portfolio-mode.momentum-mode .fixed-only { display: none; }

/* momentum picks: a scrolling list under the statistics */
.picks-cell { padding: 0; }
.picks-scroll { max-height: 320px; overflow-y: auto; }
.picks-scroll .mini td, .picks-scroll .mini th { font-size: 13px; padding: 6px 14px; }
.picks-scroll .mini th { position: sticky; top: 0; }

/* entry / exit formulas: only shown for the "Trading" strategy */
.trading-row { display: none; }
.trading-mode .trading-row { display: table-row; }
.trading-rules { display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; align-items: start; }
.trading-rules label { display: block; font-size: 14px; font-weight: bold; color: #374151; }
.trading-rules input { margin-top: 4px; font-weight: normal; }
td .trading-rules .formula-input { font-family: Consolas, "Courier New", monospace; }
td .max-days input { width: 90px; display: block; }
.max-days small { display: block; margin-top: 4px; font-size: 12px; font-weight: normal; color: #6b7280; }
.formula-help { margin-top: 10px; font-size: 13px; line-height: 1.5; color: #4b5563; }
.formula-help p { margin: 0; }
.formula-help p + p { margin-top: 4px; }
.formula-help code { padding: 0 3px; background: #f3f4f6; border-radius: 3px; font-size: 12px; }
@media (max-width: 700px) {
  .trading-rules { grid-template-columns: 1fr; }
}
.option.disabled { opacity: 0.5; cursor: not-allowed; }

.add-ticker {
  margin-top: 6px; padding: 0; border: none; background: none;
  color: #2563eb; font-size: 13px; cursor: pointer;
}
.add-ticker:hover { text-decoration: underline; }
.add-ticker[hidden] { display: none; }

.run-row { display: flex; align-items: flex-start; gap: 20px; margin-bottom: 16px; }
.option { font-size: 14px; color: #4b5563; padding-top: 10px; cursor: pointer; }
.option input { margin-right: 6px; }

/* Portfolios page: list of portfolios on the left, results on the right */
.layout { display: flex; align-items: flex-start; gap: 24px; max-width: 1300px; margin: 24px auto; padding: 0 16px; }
.layout main { flex: 1; min-width: 0; max-width: none; margin: 0; padding: 0; }
.sidebar { flex: 0 0 260px; position: sticky; top: 16px; }
@media (max-width: 800px) {
  .layout { flex-direction: column; align-items: stretch; }
  .sidebar { flex: none; position: static; }
}

/* Portfolios and Trading strategies: selection on the left, charts and comparisons in the middle, information
   (what it is, the period, notes on the data) on the right. The side columns stay in view while scrolling. */
.layout.three-col {
  display: grid; grid-template-columns: 250px minmax(0, 1fr) 340px; grid-template-areas: "side main info";
  align-items: start; max-width: 1760px;
}
.three-col > .sidebar { grid-area: side; max-height: calc(100vh - 32px); overflow-y: auto; }  /* long lists scroll */
.three-col > main { grid-area: main; }
.three-col > .info-panel { grid-area: info; }
.info-panel { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; }
.info-panel .about { margin-bottom: 12px; }
.info-panel .about td { font-size: 14px; }
.info-panel .data-notes { margin: 12px 0 0; }
.period-note {
  padding: 8px 12px; font-size: 13px; line-height: 1.45; color: #374151;
  background: white; border: 1px solid #d1d5db; border-radius: 6px;
}
.period-note:empty { display: none; }
/* the dates and Update button at the top of the information column */
.info-panel .period-inputs { margin: 0; table-layout: fixed; }
.info-panel .period-inputs th, .info-panel .period-inputs td { padding: 8px 10px; }
.info-panel .period-inputs input { padding: 6px; font-size: 14px; }
.info-panel .run-button { width: 100%; margin-bottom: 12px; }
/* medium screens: the information above the charts; small screens: one column */
@media (max-width: 1250px) {
  .layout.three-col { grid-template-columns: 250px minmax(0, 1fr); grid-template-areas: "side info" "side main"; }
  .three-col > .info-panel { position: static; max-height: none; margin-bottom: 12px; }
}
@media (max-width: 800px) {
  .layout.three-col { grid-template-columns: minmax(0, 1fr); grid-template-areas: "side" "info" "main"; }
  .three-col > .sidebar { position: static; max-height: none; }
}

/* Backtester: the inputs and charts, with the notes on the data on the right when there are any */
.layout.info-right { max-width: 1300px; justify-content: center; }
.info-right > main { max-width: 900px; }
.info-right > .info-panel { flex: 0 0 340px; }
.info-right > .info-panel[hidden] { display: none; }
@media (max-width: 1100px) {
  .layout.info-right { flex-direction: column-reverse; align-items: stretch; }
  .info-right > .info-panel { flex: none; position: static; max-height: none; }
  .info-right > main { max-width: none; }
}

.page-title { margin: 0 0 12px; }
.portfolio-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.portfolio-item {
  display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left;
  padding: 12px 16px; background: white; border: 1px solid #d1d5db; border-radius: 6px;
  cursor: pointer; font-size: 15px; color: #1f2937;
}
.portfolio-item span { font-size: 13px; color: #6b7280; }
.portfolio-item:hover { background: #f3f4f6; }
.portfolio-item.active { border-color: #2563eb; box-shadow: inset 3px 0 0 #2563eb; }
/* the "UCITS ETFs instead" checkbox under the Update button */
.ucits-option {
  display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 8px 12px; background: white;
  border: 1px solid #d1d5db; border-radius: 6px; font-size: 13px; color: #374151; cursor: pointer;
}
.ucits-option input { width: 16px; height: 16px; margin: 0; cursor: pointer; }
.ucits-option.disabled { opacity: 0.5; cursor: not-allowed; }

/* the portfolio's description above its equity curve */
.about td { line-height: 1.5; }
.about p { margin: 0; }
.about .about-rules { margin-top: 8px; font-size: 13px; color: #6b7280; }
.about .about-formulas { margin-top: 6px; font-size: 13px; color: #4b5563; white-space: pre-wrap; }
.about code { padding: 1px 4px; background: #f3f4f6; border-radius: 3px; font-size: 12px; }

/* the button sits directly under the input table, like a footer */
.inputs { margin-bottom: 0; }
.run-button {
  display: block;
  padding: 10px 24px;
  font-size: 16px;
  background: #2563eb;
  color: white;
  border: none;
  border-radius: 0 0 6px 6px;
  cursor: pointer;
  margin-bottom: 0;
}
.run-button:hover { background: #1d4ed8; }
.run-button:disabled { background: #9ca3af; cursor: wait; }

.chart-cell { padding: 16px; height: 380px; }
.chart-cell.half { height: 190px; padding-top: 0; }
.stats td + td, .stats th + th { text-align: right; font-variant-numeric: tabular-nums; }
/* small table nested inside the correlation table */
.mini-cell { padding: 0; }
.mini { margin: 0; border: none; }
.mini th, .mini td { padding: 6px 14px; font-size: 14px; }
.mini th { background: #f9fafb; }

.reg-info { font-size: 14px; color: #4b5563; }

/* Excel-style sheet tabs along the bottom of the table */
.sheet-tabs { background: #f3f4f6; padding: 0 8px; border-bottom: none; }
.sheet-tab {
  padding: 8px 16px; margin-right: 2px;
  background: #e5e7eb; color: #4b5563;
  border: 1px solid #d1d5db; border-top: none; border-radius: 0 0 6px 6px;
  font-size: 14px; cursor: pointer;
}
.sheet-tab:hover { background: #dbeafe; }
.sheet-tab.active { background: white; color: #1f2937; font-weight: bold; border-top: 2px solid white; margin-top: -1px; }

/* linear / logarithmic switch under the equity curve (Backtester and Portfolios) */
.scale-row { padding: 0 16px 12px; font-size: 13px; color: #4b5563; border-bottom: none; }
.scale-switch { display: inline-flex; margin-left: 6px; border: 1px solid #d1d5db; border-radius: 6px; overflow: hidden; vertical-align: middle; }
.scale-button { padding: 4px 12px; border: none; background: #f3f4f6; color: #4b5563; font-size: 13px; cursor: pointer; }
.scale-button + .scale-button { border-left: 1px solid #d1d5db; }
.scale-button:hover { background: #dbeafe; }
.scale-button.active { background: #2563eb; color: white; }

/* show / hide switches for extra lines (benchmark, leveraged): a box that gets a cross when the line is shown */
.line-toggles { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: #4b5563; }
.line-toggles-row { padding: 12px 16px 0; border-bottom: none; }
.line-toggle {
  display: inline-flex; align-items: center; gap: 8px; padding: 5px 10px;
  background: white; border: 1px solid #d1d5db; border-radius: 6px;
  font-size: 13px; color: #374151; cursor: pointer;
}
.line-toggle:hover { background: #f3f4f6; }
.line-toggle:disabled { opacity: 0.5; cursor: not-allowed; }
.toggle-box {
  display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px;
  border: 2px solid var(--line, #6b7280); border-radius: 3px; font-size: 14px; font-weight: bold; line-height: 1;
  color: var(--line, #6b7280);
}
.line-toggle[aria-pressed="true"] .toggle-box::before { content: "\2715"; }
.line-toggle[aria-pressed="true"] { border-color: var(--line, #6b7280); }
.toggle-swatch { width: 18px; border-top: 3px solid var(--line, #6b7280); }
.toggle-swatch.dashed { border-top-style: dashed; }

.stats .portfolio-cell { background: #f3f4f6; font-weight: bold; border-left: 2px solid #9ca3af; }

.data-notes:empty { display: none; }
.data-notes {
  margin: -4px 0 12px; padding: 8px 12px; font-size: 13px; line-height: 1.45;
  color: #92400e; background: #fffbeb; border: 1px solid #fcd34d; border-radius: 6px;
}
.data-notes p { margin: 0; }
.data-notes p + p { margin-top: 6px; }

.error { color: #b91c1c; margin-bottom: 16px; min-height: 1.2em; }

/* Learning page: the chosen tree of lessons, drawn left to right with connector lines, and the chosen lesson below */
.learning { table-layout: fixed; width: 100%; }
.learning th { font-size: 16px; }
.topic-intro { color: #4b5563; font-size: 14px; }
.tree { padding: 20px 16px; overflow-x: auto; }
.tree ul { display: flex; flex-direction: column; margin: 0; padding: 0 0 0 20px; position: relative; }
.tree > ul { width: max-content; margin: 0 auto; padding-left: 0; }
.tree li { list-style: none; position: relative; display: flex; align-items: center; padding: 5px 0 5px 20px; }
/* each child draws a short line from the shared vertical line to its box, and its part of that vertical line */
.tree li::before, .tree li::after {
  content: ""; position: absolute; left: 0; width: 20px; height: 50%; border-left: 1px solid #9ca3af;
}
.tree li::before { top: 0; border-bottom: 1px solid #9ca3af; }
.tree li::after { top: 50%; }
.tree li:first-child::before { border-left: none; }
.tree li:first-child::after { border-top: 1px solid #9ca3af; border-radius: 6px 0 0 0; margin-top: -1px; }
.tree li:last-child::before { border-radius: 0 0 0 6px; }
.tree li:last-child::after { border: none; }
.tree li:only-child::before, .tree li:only-child::after { display: none; }
.tree li:only-child { padding-left: 0; }
/* line from a parent box across to its children */
.tree ul ul::before { content: ""; position: absolute; left: 0; top: 50%; width: 20px; border-top: 1px solid #9ca3af; }
.tree-node {
  flex: none; width: 190px; padding: 9px 12px; background: white; border: 1px solid #d1d5db; border-radius: 6px;
  font-size: 14px; color: #1f2937; cursor: pointer; line-height: 1.3;
}
.tree-node:hover { background: #dbeafe; }
.tree-node.active { background: #2563eb; border-color: #2563eb; color: white; }
.lesson { padding: 16px; }
.lesson h3 { margin: 0 0 10px; font-size: 16px; color: #1f2937; }
.lesson p { margin: 0 0 10px; line-height: 1.55; color: #374151; }
.lesson p:last-child { margin-bottom: 0; }