/* AutoEarn — shared component styles. Each page sets the theme variables. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; }
img { max-width: 100%; display: block; }

/* ---------------------------------------------------------------- chart */
/* Charts are Chart.js canvases, drawn by assets/core.js. Chart.js sizes the
   canvas itself, so the wrapper owns the height and the canvas fills it.
   The zoom bar shares that height with the canvas, so switching zoom on or
   off never moves the rest of the page. */
.ae-chart { position: relative; width: 100%; display: flex; flex-direction: column; }
.ae-chart-box { position: relative; flex: 1 1 auto; min-height: 0; width: 100%; }
.ae-chart canvas { display: block; width: 100% !important; height: 100% !important; }

.ae-zoom {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 10px; flex: none; margin-bottom: 8px; min-width: 0;
}
.ae-zoom-hint {
  font-size: 12px; color: var(--ae-muted); margin-right: auto;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ae-zoom-btns {
  display: inline-flex; gap: 2px; padding: 2px; border-radius: 9px; flex: none;
  background: var(--ae-track, rgba(128,128,128,.16));
  border: 1px solid var(--ae-grid, rgba(128,128,128,.18));
}
.ae-zoom button {
  border: 0; border-radius: 7px; cursor: pointer; background: transparent;
  color: var(--ae-muted); padding: 5px 9px; white-space: nowrap;
  font: 600 12px/1 var(--ae-font, system-ui, sans-serif);
}
.ae-zoom button:not(:disabled) { background: var(--ae-surface); color: var(--ae-text); }
.ae-zoom button:disabled { opacity: .45; cursor: default; }
.ae-zoom button:focus-visible { outline: 2px solid var(--ae-pf); outline-offset: 2px; }
/* the canvas takes the drag, so say so with the cursor */
.ae-chart-box canvas { cursor: crosshair; }
@media (max-width: 719px) {
  .ae-zoom-hint { display: none; }
  .ae-zoom { justify-content: flex-end; }
  .ae-zoom button { padding: 5px 9px; font-size: 11.5px; }
}

/* ------------------------------------------------------------- info icon */
.ae-i {
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; border-radius: 50%; margin-left: 5px;
  border: 1px solid currentColor; color: var(--ae-muted);
  font: 700 10px/1 var(--ae-font, system-ui, sans-serif); font-style: normal;
  cursor: help; vertical-align: 1px; position: relative;
}
.ae-i::after {
  content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 8px);
  transform: translateX(-50%); width: max-content; max-width: 220px;
  padding: 8px 10px; border-radius: 9px; z-index: 5;
  background: var(--ae-tip-bg, rgba(20,22,28,.96)); color: var(--ae-tip-fg, #f2f4f8);
  border: 1px solid var(--ae-tip-border, rgba(255,255,255,.14));
  font: 500 12px/1.45 var(--ae-font, system-ui, sans-serif);
  text-align: left; white-space: normal; opacity: 0; visibility: hidden;
  transition: opacity .14s; box-shadow: 0 8px 22px rgba(0,0,0,.28);
}
.ae-i:hover::after, .ae-i:focus-visible::after { opacity: 1; visibility: visible; }
/* same control, but it flags a risk instead of adding a footnote.
   Own name, not plain .warn — some pages already use that for a callout box. */
.ae-i.ae-i-warn { color: var(--ae-dd, #e5534b); }
/* this one sits in a price cell near the right edge, so it opens leftwards
   instead of centring — centred, it pushed the page sideways on a phone */
.ae-i.ae-i-warn::after {
  max-width: min(272px, 74vw); left: auto; right: -2px; transform: none;
}

.ae-legend { display: flex; flex-wrap: wrap; gap: 7px 18px; align-items: center; }
.ae-legend-item {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--ae-muted, #8a8f98);
}
.ae-legend-item b { color: var(--ae-text); font-weight: 600; }
.ae-swatch { width: 15px; height: 3px; border-radius: 2px; flex: none; }
.ae-swatch.thick { height: 5px; }

/* ---------------------------------------------------------------- slider */
.ae-risk { display: grid; gap: 10px; }
.ae-risk-head {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.ae-risk-val {
  font: 700 clamp(26px, 5vw, 38px)/1 var(--ae-font-mono, monospace);
  color: var(--ae-pf); font-variant-numeric: tabular-nums;
}
input[type=range].ae-range {
  --ae-fill: 50%;
  -webkit-appearance: none; appearance: none; width: 100%; height: 26px;
  background: transparent; cursor: pointer; margin: 0;
}
input[type=range].ae-range::-webkit-slider-runnable-track {
  height: 8px; border-radius: 99px;
  background: linear-gradient(90deg, var(--ae-pf) 0 var(--ae-fill),
    var(--ae-track, rgba(128,128,128,.25)) var(--ae-fill) 100%);
}
input[type=range].ae-range::-moz-range-track {
  height: 8px; border-radius: 99px; background: var(--ae-track, rgba(128,128,128,.25));
}
input[type=range].ae-range::-moz-range-progress {
  height: 8px; border-radius: 99px; background: var(--ae-pf);
}
input[type=range].ae-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 24px; height: 24px; margin-top: -8px;
  border-radius: 50%; background: var(--ae-surface, #fff);
  border: 3px solid var(--ae-pf); box-shadow: 0 2px 10px rgba(0,0,0,.25);
}
input[type=range].ae-range::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%; background: var(--ae-surface, #fff);
  border: 3px solid var(--ae-pf); box-shadow: 0 2px 10px rgba(0,0,0,.25);
}
input[type=range].ae-range:focus-visible { outline: 2px solid var(--ae-pf); outline-offset: 4px; }
.ae-ticks {
  display: flex; justify-content: space-between;
  font: 500 11px/1 var(--ae-font-mono, monospace); color: var(--ae-muted);
}

/* compounding vs fixed-lot switch */
.ae-mode {
  display: inline-flex; gap: 3px; padding: 3px; border-radius: 11px;
  background: var(--ae-track, rgba(128,128,128,.16));
  border: 1px solid var(--ae-grid, rgba(128,128,128,.18));
}
.ae-mode button {
  border: 0; border-radius: 8px; cursor: pointer; background: transparent;
  color: var(--ae-muted); padding: 8px 15px; white-space: nowrap;
  font: 600 13.5px/1 var(--ae-font, system-ui, sans-serif);
}
.ae-mode button[aria-pressed="true"] { background: var(--ae-surface); color: var(--ae-text); }
.ae-mode button:focus-visible { outline: 2px solid var(--ae-pf); outline-offset: 2px; }

/* ---------------------------------------------------------------- stats */
.ae-stats {
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  background: var(--ae-grid, rgba(128,128,128,.18));
  border: 1px solid var(--ae-grid, rgba(128,128,128,.18));
  border-radius: 14px; overflow: hidden;
}
.ae-stat { background: var(--ae-surface); padding: 15px 16px; }
.ae-stat-v {
  font: 700 clamp(19px, 2.4vw, 25px)/1.15 var(--ae-font-mono, monospace);
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.ae-stat-l { font-size: 12.5px; color: var(--ae-muted); margin-top: 5px; line-height: 1.35; }
.ae-tone-good .ae-stat-v { color: var(--ae-pos, #12a150); }
.ae-tone-bad .ae-stat-v { color: var(--ae-neg, #d4303a); }
.ae-tone-neutral .ae-stat-v { color: var(--ae-text); }

/* ---------------------------------------------------------------- tables */
/* On desktop every table has to fit: no sideways scroll. Below 900px the
   wide ones (month heatmap, per-strategy rows) may scroll again. */
/* min-width:0 stops a wide table inside a grid/flex item from widening the
   whole column — without it the item's min-content keeps the table's width. */
.ae-table-wrap { overflow-x: visible; min-width: 0; }
@media (max-width: 899px) {
  .ae-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* fixed layout would squash cells to nothing instead, so force the scroll */
  .ae-table { min-width: 470px; }
  .ae-table-heat { min-width: 580px; }
  .ae-table-corr { min-width: 330px; }
}
.ae-table {
  width: 100%; border-collapse: collapse; table-layout: fixed;
  font: 500 13px/1.4 var(--ae-font-mono, monospace);
  font-variant-numeric: tabular-nums;
}
.ae-table th, .ae-table td {
  padding: 8px 9px; text-align: right; white-space: nowrap;
  border-bottom: 1px solid var(--ae-grid, rgba(128,128,128,.14));
  overflow: hidden; text-overflow: ellipsis;
}
.ae-table thead th { white-space: normal; }
.ae-table thead th {
  font-weight: 600; color: var(--ae-muted); font-size: 11.5px;
  letter-spacing: .04em; text-transform: uppercase;
}
.ae-table tbody th {
  text-align: left; font-weight: 600; color: var(--ae-text);
  font-family: var(--ae-font, system-ui, sans-serif); font-size: 13px;
  white-space: normal; background: var(--ae-surface);
}
@media (max-width: 899px) {
  .ae-table tbody th { position: sticky; left: 0; }
}
.ae-table td.pos, .ae-table .pos { color: var(--ae-pos, #12a150); }
.ae-table td.neg, .ae-table .neg { color: var(--ae-neg, #d4303a); }
.ae-table .ae-row-pf th, .ae-table .ae-row-pf td {
  background: var(--ae-pf-soft, rgba(60,130,246,.08));
  font-weight: 700; border-bottom: none;
}
.ae-table .ae-row-pf th { color: var(--ae-pf); }
/* fourteen columns still have to fit a laptop, so the heatmap runs tighter */
.ae-table-heat { font-size: 11.5px; }
.ae-table-heat td { text-align: center; padding: 6px 2px; }
.ae-table-heat th { font-size: 11.5px; padding: 6px 2px; }
.ae-table-heat tbody th { font-size: 12px; padding-left: 0; }
.ae-table-heat .ae-empty { background: var(--ae-grid, rgba(128,128,128,.07)); }
.ae-table-heat .ae-year-cell { font-weight: 700; border-left: 2px solid var(--ae-grid); }
.ae-table-corr td { text-align: center; }
.ae-table-corr .ae-corr-self { background: var(--ae-grid, rgba(128,128,128,.07)); }
.ae-note { font-size: 12.5px; color: var(--ae-muted); margin: 10px 0 0; line-height: 1.55; }

/* --------------------------------------------- bảng so sánh hai bên */
.ae-vs { width: 100%; border-collapse: collapse; font-size: 14.5px; line-height: 1.5; }
.ae-vs th, .ae-vs td {
  padding: 12px 12px; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--ae-grid, rgba(128,128,128,.14));
}
.ae-vs thead th {
  font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ae-muted); font-weight: 600;
}
.ae-vs tbody th { font-weight: 600; width: 27%; color: var(--ae-text); }
.ae-vs tbody tr:last-child th, .ae-vs tbody tr:last-child td { border-bottom: 0; }
.ae-vs .bad { color: var(--ae-dd, #d4303a); }
.ae-vs .good { color: var(--ae-pf, #12a150); }
@media (max-width: 719px) {
  .ae-vs { font-size: 13.5px; }
  .ae-vs th, .ae-vs td { padding: 10px 6px; }
  .ae-vs tbody th { width: 30%; }
}

/* ------------------------------------------------------------ year grid */
.ae-years {
  display: grid; gap: 1px; grid-template-columns: repeat(auto-fit, minmax(76px, 1fr));
  background: var(--ae-grid, rgba(128,128,128,.18));
  border: 1px solid var(--ae-grid, rgba(128,128,128,.18));
  border-radius: 13px; overflow: hidden;
}
.ae-year { background: var(--ae-surface); padding: 12px 8px; text-align: center; }
.ae-year b {
  display: block; font: 700 15.5px/1.2 var(--ae-font-mono, monospace);
  font-variant-numeric: tabular-nums;
}
.ae-year span { display: block; margin-top: 4px; font-size: 11.5px; color: var(--ae-muted); }
.ae-year.pos b { color: var(--ae-pos, #12a150); }
.ae-year.neg b { color: var(--ae-neg, #d4303a); }

/* ---------------------------------------------------------------- faq */
.ae-faq-item { border-bottom: 1px solid var(--ae-grid, rgba(128,128,128,.16)); }
.ae-faq-q {
  width: 100%; background: none; border: 0; color: inherit; font: inherit;
  display: flex; gap: 14px; align-items: flex-start; justify-content: space-between;
  padding: 17px 0; text-align: left; cursor: pointer; font-weight: 600;
}
.ae-faq-q::after {
  content: "+"; flex: none; font-weight: 400; font-size: 21px; line-height: 1;
  color: var(--ae-muted); transition: transform .18s;
}
.ae-faq-item[open] .ae-faq-q::after { transform: rotate(45deg); }
.ae-faq-a { display: none; padding: 0 0 18px; color: var(--ae-muted); line-height: 1.7; max-width: 68ch; }
.ae-faq-item[open] .ae-faq-a { display: block; }
/* a claim a reader can check themselves, so the link has to be visible */
.ae-faq-a a, .ae-cite {
  color: var(--ae-pf); text-decoration: underline;
  text-underline-offset: 2px; text-decoration-thickness: 1px;
}
.ae-src-line { display: block; margin-top: 9px; font-size: 12.5px; line-height: 1.6; }

/* the "(i) …" note under a table row label */
.ae-hint {
  display: block; margin-top: 3px; font-weight: 400;
  font-size: 11.5px; line-height: 1.45; color: var(--ae-muted);
  font-family: var(--ae-font, system-ui, sans-serif); white-space: normal;
}

/* ------------------------------------------------------- reveal on scroll */
.ae-reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s, transform .5s; }
.ae-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .ae-reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ------------------------------------------------------------ dev helpers */
.ae-placeholder { outline: 2px dashed #e8a33d !important; outline-offset: 2px; }
.ae-devbar {
  position: fixed; left: 12px; bottom: 12px; z-index: 999;
  background: #1b1d23; color: #ffd79a; border: 1px solid #e8a33d;
  border-radius: 10px; padding: 9px 12px; font: 500 12.5px/1.4 system-ui, sans-serif;
  display: flex; gap: 10px; align-items: center; max-width: min(92vw, 460px);
  box-shadow: 0 8px 26px rgba(0,0,0,.4);
}
.ae-devbar code { background: rgba(255,255,255,.1); padding: 1px 5px; border-radius: 4px; }
.ae-devbar button {
  background: #e8a33d; color: #1b1d23; border: 0; border-radius: 6px;
  padding: 4px 9px; font: 600 12px system-ui, sans-serif; cursor: pointer; flex: none;
}
[data-empty="1"]::after {
  content: "Khối này cần nội dung thật trước khi đăng — xem assets/config.js";
  display: block; margin-top: 10px; padding: 11px 13px;
  border: 1px dashed var(--ae-muted); border-radius: 10px;
  font: 500 12.5px/1.5 system-ui, sans-serif; color: var(--ae-muted);
}