/* Demo dashboard (demo.html). Chart colors validated with the dataviz palette checks:
   series-1/series-2 pass lightness, chroma, colorblind separation and contrast in both themes. */

.demo-page {
  --series-1: #2E5C99;
  --series-2: #D35834;
  --report-bg: #F2F1EC;
  --grid: #E9E8E1;
  --axis: #C9C8BE;
  --good: #205512;
  --warn: #B86200;
  --bad: #B91C1C;
  --dim: .32;
}

@media (prefers-color-scheme: dark) {
  .demo-page {
    --series-1: #5A8DE0;
    --series-2: #E0704C;
    --report-bg: #18141A;
    --grid: #322A35;
    --axis: #4A404E;
    --good: #52B748;
    --warn: #E39A3B;
    --bad: #F07070;
  }
}

.demo-page .nav .back { display: inline-flex; color: var(--text); font-weight: 500; }

.demo-intro { padding: 56px var(--gutter) 32px; }
.demo-intro h1 { font-size: clamp(1.9rem, 4vw, 2.8rem); margin: 4px 0 16px; }
.demo-intro .lead { font-size: 1.1rem; color: var(--muted); max-width: 40em; }
.demo-links { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 20px; font-weight: 500; }
.demo-links a { color: var(--primary); text-underline-offset: 3px; }

/* Report frame */
.report {
  background: var(--report-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.report-head {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 18px 24px; background: var(--surface); border-bottom: 1px solid var(--border);
}
.report-head strong { display: block; font-family: var(--font-display); font-size: 1.15rem; }
.report-head span { color: var(--muted); font-size: .85rem; }
.badge {
  font: 500 .72rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: .05em;
  padding: 7px 10px; border-radius: 999px; border: 1px solid var(--border); color: var(--muted);
}

.report-tabs { display: flex; gap: 4px; padding: 0 16px; background: var(--surface); border-bottom: 1px solid var(--border); overflow-x: auto; }
.report-tabs button {
  font: 500 .92rem/1 var(--font-body); color: var(--muted); background: none; border: 0;
  padding: 14px 12px 12px; border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap;
}
.report-tabs button[aria-selected="true"] { color: var(--text); border-bottom-color: var(--series-2); }
.report-tabs button:focus-visible { outline: 2px solid var(--series-1); outline-offset: -2px; }

.report-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding: 16px 24px 0; }
.report-filters label { display: flex; align-items: center; gap: 8px; font-size: .85rem; color: var(--muted); }
.report-filters select {
  font: 500 .9rem/1.2 var(--font-body); color: var(--text); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 7px 10px; min-width: 170px;
}
.posicao { font-size: .85rem; color: var(--muted); }
.report-filters [hidden] { display: none; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-filter {
  display: inline-flex; align-items: center; gap: 6px; font: 500 .82rem/1 var(--font-body);
  color: var(--text); background: var(--surface); border: 1px solid var(--series-1);
  border-radius: 999px; padding: 6px 8px 6px 12px; cursor: pointer;
}
.chip-filter span { font-size: 1rem; line-height: .8; color: var(--muted); }

.report-body { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; padding: 16px 24px 24px; }
.report-body.busy { opacity: .6; }
.loading { grid-column: 1 / -1; color: var(--muted); padding: 48px 0; text-align: center; }

/* Visual containers */
.viz { grid-column: span 12; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 16px 18px; min-width: 0; }
.viz.w3 { grid-column: span 3; }
.viz.w4 { grid-column: span 4; }
.viz.w5 { grid-column: span 5; }
.viz.w6 { grid-column: span 6; }
.viz.w7 { grid-column: span 7; }
.viz.w8 { grid-column: span 8; }
.viz-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.viz-head h3 { font: 600 .95rem/1.3 var(--font-body); }
.viz-head p { font-size: .8rem; color: var(--muted); margin-top: 2px; }
.viz-toggle {
  font: 500 .75rem/1 var(--font-body); color: var(--muted); background: none; cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 6px 8px; white-space: nowrap;
}
.viz-toggle:hover { color: var(--text); }

/* Cards */
.kpi-card { padding: 16px 18px; }
.kpi-card .label { font-size: .82rem; color: var(--muted); }
.kpi-card .value { font: 600 1.7rem/1.2 var(--font-body); margin: 6px 0 6px; letter-spacing: -.01em; }
.kpi-card .ref { font-size: .8rem; color: var(--muted); }
.delta { font-weight: 600; }
.delta.up { color: var(--good); }
.delta.down { color: var(--bad); }
.status { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
.status.good { color: var(--good); }
.status.warn { color: var(--warn); }
.status.bad { color: var(--bad); }

/* Charts */
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart text { font-family: var(--font-body); fill: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.chart text.val { fill: var(--text); font-weight: 600; }
.chart text.cat { fill: var(--text); font-size: 12px; font-variant-numeric: normal; }
.chart .grid { stroke: var(--grid); stroke-width: 1; }
.chart .axis { stroke: var(--axis); stroke-width: 1; }
.chart .s1 { fill: var(--series-1); }
.chart .s2 { fill: var(--series-2); }
.chart .line2 { fill: none; stroke: var(--series-2); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .dot2 { fill: var(--series-2); stroke: var(--surface); stroke-width: 2; }
.chart .hit { fill: transparent; cursor: pointer; outline: none; }
.chart .mark { transition: opacity .15s; }
.chart .dimmed .mark { opacity: var(--dim); }
.chart .dimmed .mark.on { opacity: 1; }
.chart .hover-band { fill: var(--text); opacity: 0; }
.chart g.item:hover .hover-band, .chart g.item:focus-within .hover-band { opacity: .05; }
.chart g.item:focus-visible .hover-band { opacity: .08; }

.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .8rem; color: var(--muted); margin-bottom: 8px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { display: inline-block; width: 12px; height: 10px; border-radius: 2px; }
.legend i.ln { height: 2px; width: 16px; border-radius: 1px; }
.legend .k1 { background: var(--series-1); }
.legend .k2 { background: var(--series-2); }

/* Tables */
.table-wrap { overflow-x: auto; }
.dtable { width: 100%; border-collapse: collapse; font-size: .85rem; }
.dtable th { text-align: left; font-weight: 500; color: var(--muted); font-size: .78rem; padding: 8px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.dtable td { padding: 9px 10px; border-bottom: 1px solid var(--grid); }
.dtable .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dtable tbody tr.clickable { cursor: pointer; }
.dtable tbody tr.clickable:hover, .dtable tbody tr.clickable:focus-visible { background: var(--report-bg); outline: none; }
.dtable tbody tr.on { background: var(--report-bg); box-shadow: inset 3px 0 0 var(--series-1); }
.dtable tfoot td { font-weight: 600; border-bottom: 0; border-top: 1px solid var(--border); }
.dtable .bar-cell { min-width: 90px; }
.bar-cell .bar { height: 8px; border-radius: 0 4px 4px 0; background: var(--series-1); }
.empty { color: var(--muted); font-size: .85rem; padding: 12px 0; }

/* Tooltip */
.tip {
  position: fixed; z-index: 30; pointer-events: none; min-width: 150px; max-width: 260px;
  background: var(--surface); color: var(--text); border: 1px solid var(--border);
  border-radius: var(--radius-md); box-shadow: 0 8px 24px rgba(19, 36, 59, .14);
  padding: 10px 12px; font-size: .8rem;
}
.tip .t-title { color: var(--muted); margin-bottom: 6px; }
.tip .t-row { display: flex; align-items: center; gap: 8px; margin-top: 3px; }
.tip .t-row b { font-size: .9rem; font-variant-numeric: tabular-nums; }
.tip .t-row span { color: var(--muted); }
.tip .key { width: 12px; height: 2px; border-radius: 1px; flex: none; }
.tip .key.k1 { background: var(--series-1); height: 3px; }
.tip .key.k2 { background: var(--series-2); height: 3px; }
.tip .t-hint { color: var(--muted); margin-top: 8px; font-size: .75rem; }

/* Reproduce section */
.reproduce { padding-top: 72px; padding-bottom: 96px; max-width: 880px; margin-left: auto; margin-right: auto; }
.reproduce h2 { margin-bottom: 12px; }
.reproduce-lead { color: var(--muted); font-size: 1.05rem; margin-bottom: 32px; }
.steps { margin: 0; padding: 0; list-style: none; counter-reset: step; display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.steps > li { counter-increment: step; position: relative; padding-left: 52px; }
.steps > li::before {
  content: counter(step, decimal-leading-zero); position: absolute; left: 0; top: 2px;
  font: 500 .9rem/1 var(--font-mono); color: var(--secondary);
}
.steps h3 { font-size: 1.1rem; margin-bottom: 8px; }
.steps p { color: var(--muted); }
.steps a { color: var(--primary); font-weight: 500; }
.steps code { font: 500 .82em var(--font-mono); background: var(--surface); border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; }
.files { margin: 10px 0 0; padding-left: 18px; color: var(--muted); display: grid; gap: 4px; }
.visuals { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: .88rem; }
.visuals th, .visuals td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
.visuals th { color: var(--muted); font-weight: 500; font-size: .8rem; }
.visuals td:first-child { color: var(--muted); white-space: nowrap; }
.reproduce-cta {
  margin-top: 48px; padding: 28px; border-radius: var(--radius-lg); background: var(--surface);
  border: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.reproduce-cta p { font: 600 1.15rem/1.3 var(--font-display); }

@media (max-width: 960px) {
  .viz.w3 { grid-column: span 6; }
  .viz.w4, .viz.w5, .viz.w6, .viz.w7, .viz.w8 { grid-column: span 12; }
}

@media (max-width: 640px) {
  .report-head, .report-filters { padding-left: 16px; padding-right: 16px; }
  .report-body { padding: 12px 12px 16px; gap: 12px; }
  .report-filters label { width: 100%; justify-content: space-between; }
  .report-filters select { flex: 1; min-width: 0; max-width: 240px; }
  .kpi-card .value { font-size: 1.35rem; }
  .steps > li { padding-left: 40px; }
  .visuals td:first-child { white-space: normal; }
}

@media (max-width: 400px) {
  .viz.w3 { grid-column: span 12; }
}

@media (prefers-reduced-motion: reduce) {
  .chart .mark { transition: none; }
}