/* Analytics panel (prototype). Every colour, size and duration comes from
   tokens.css. Charts follow the system's meanings: sun amber is solar, one
   blue is battery and grid (grid as the lighter tint), ink is the house, red
   only where money was lost. Green stays on the main strip's price bars; the
   cheap window here is a neutral wash with dashed edges and a written label.
   Line style still carries state: dotted is planned, hatched is capped or
   rebuilt, and a past forecast is a solid tick. */

.view-analytics {
  --an-halo: var(--ground);              /* label outlines match the panel's ground */
  --an-grid: color-mix(in srgb, var(--blue) 42%, transparent);
  --an-highlight: color-mix(in srgb, var(--ink) 8%, transparent);
  --an-window: color-mix(in srgb, var(--ink) 4%, transparent);
  --an-ribbon: 45%;                      /* flow ribbon strength over the ground */
}
[data-scheme="dark"] .view-analytics {
  --an-ribbon: 62%;                      /* amber over navy needs more to still read as sun */
}

.view-analytics .panel-content {
  padding: var(--s-4) var(--gutter) var(--s-7);
}

.an {
  display: grid;
  gap: var(--s-5);
  min-width: 0;
}

.an-measure {
  height: 0;
}

/* A period change keeps the last view, dimmed, until the new one is ready. */
.an.is-refreshing {
  opacity: 0.55;
  transition: opacity var(--d-ui) ease;
}

/* --- period picker ----------------------------------------------------- */

.an-period {
  display: grid;
  gap: var(--s-3);
}

.an-kinds {
  max-width: 22rem;
}

.an-stepper {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

.an-step {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  border-radius: var(--r-pill);
  border: var(--stroke) solid var(--line-strong);
  color: var(--ink);
  transition: opacity var(--d-ui) ease;
}
.an-step:hover:not(:disabled) { opacity: 0.85; }
.an-step:active:not(:disabled) { opacity: 0.7; }
.an-step:disabled { opacity: 0.35; cursor: default; }
.an-step:focus-visible {
  outline: var(--stroke-heavy) solid var(--focus);
  outline-offset: 2px;
}

.an-period-label {
  flex: 1;
  min-width: 0;
  text-align: center;
}
.an-period-label h3,
.an-period-label p {
  margin: 0;
}
.an-period-label p {
  margin-top: var(--s-1);
}

/* --- verdict ------------------------------------------------------------ */

.an-verdict p {
  margin: 0;
  max-width: 40rem;
}
.an-verdict .t-body {
  margin-top: var(--s-2);
}

/* --- charts and their readout ------------------------------------------- */

.an-chart {
  position: relative;
  min-width: 0;
  border-radius: var(--r-small);
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}
.an-chart:focus-visible {
  outline: var(--stroke-heavy) solid var(--focus);
  outline-offset: 4px;
}

.an-svg {
  display: block;
  overflow: visible;
  font-family: var(--font);
}

.an-readout {
  min-height: calc(2 * var(--t-small) * var(--lh-body));
  margin: var(--s-2) 0 0;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.an-readout.is-selected {
  color: var(--ink);
}
.an-readout strong {
  font-weight: var(--w-bold);
}

/* "Show the numbers": every chart's values as a plain table. */
.an-table-row {
  display: flex;
}
.an-table-toggle {
  min-height: var(--tap);
  padding: 0;
  color: var(--ink-2);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-color: var(--line-strong);
  cursor: pointer;
}
.an-table-toggle:hover { color: var(--ink); }
.an-table-toggle:focus-visible {
  outline: var(--stroke-heavy) solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--r-small);
}
.an-table-wrap {
  overflow-x: auto;
  margin-bottom: var(--s-3);
}
.an-table-wrap[hidden] {
  display: none;
}
.an-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-small);
  font-variant-numeric: tabular-nums;
}
.an-table th,
.an-table td {
  padding: var(--s-1) var(--s-3) var(--s-1) 0;
  border-bottom: 1px solid var(--line);
  text-align: right;
  white-space: nowrap;
}
.an-table thead th {
  color: var(--ink-2);
  font-size: var(--t-label);
  font-weight: var(--w-medium);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}
.an-table th:first-child {
  text-align: left;
  font-weight: var(--w-medium);
}

.an-hit { fill: transparent; cursor: pointer; }
.an-col-hl { fill: var(--an-highlight); opacity: 0; transition: opacity var(--d-value) ease; }
.an-col-hl.is-visible { opacity: 1; }
.an-row-hl { fill: transparent; }
.an-row-hl.is-selected { fill: var(--an-highlight); }

/* Text inside drawings: label type for names, bold tabular for numbers,
   outlined in the panel's ground so a label stays legible over a mark. */
.an-zone,
.an-scale,
.an-axis-label,
.an-inline-label,
.an-ref-label,
.an-price-label,
.an-flow-label,
.an-row-label,
.an-row-value {
  paint-order: stroke;
  stroke: var(--an-halo);
  stroke-width: var(--label-halo);
  stroke-linejoin: round;
  pointer-events: none;
}
.an-zone {
  fill: var(--ink-2);
  font-size: var(--t-label);
  font-weight: var(--w-medium);
  letter-spacing: var(--track-label);
}
.an-scale,
.an-axis-label {
  fill: var(--ink-2);
  font-size: var(--t-label);
  font-weight: var(--w-medium);
  font-variant-numeric: tabular-nums;
}
.an-inline-label,
.an-ref-label {
  fill: var(--ink-2);
  font-size: var(--t-label);
  font-weight: var(--w-medium);
}

.an-price-label {
  fill: var(--ink-2);
  font-size: var(--t-label);
  font-weight: var(--w-bold);
  font-variant-numeric: tabular-nums;
}

.an-row-label {
  fill: var(--ink-2);
  font-size: var(--t-label);
  font-weight: var(--w-medium);
  font-variant-numeric: tabular-nums;
}
.an-row-value {
  fill: var(--ink);
  font-size: var(--t-label);
  font-weight: var(--w-bold);
  font-variant-numeric: tabular-nums;
}

.an-zero { stroke: var(--line-strong); stroke-width: 1; }
.an-baseline { stroke: var(--line-strong); stroke-width: 1; }
.an-ref { stroke: var(--line-strong); stroke-width: 1; }
.an-midnight { stroke: var(--line); stroke-width: 1; }

.an-bar { pointer-events: none; }
.an-bar--paid { fill: color-mix(in srgb, var(--ink-2) var(--price-tint-neutral), transparent); }
.an-bar--loss { fill: var(--loss); }
.an-bar--earned { fill: var(--blue); }
.an-bar--sun { fill: var(--sun); }
.an-bar--battery { fill: var(--blue); }
.an-bar--grid { fill: var(--an-grid); }


/* Hour-of-day prices reuse the strip's price-bar colours. */
.an-price { pointer-events: none; }
.an-price--neutral { fill: color-mix(in srgb, var(--ink-2) var(--price-tint-neutral), transparent); }
.an-price--loss { fill: color-mix(in srgb, var(--loss) var(--price-tint), transparent); }
.an-window { fill: var(--an-window); pointer-events: none; }
.an-window-edge { stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: var(--dash-idle); pointer-events: none; }

.an-sun-area { fill: color-mix(in srgb, var(--sun) 28%, transparent); pointer-events: none; }
.an-sun-line { fill: none; stroke: var(--sun); stroke-width: var(--stroke); stroke-linejoin: round; pointer-events: none; }
.an-house-line { fill: none; stroke: var(--ink); stroke-width: var(--stroke-heavy); stroke-linejoin: round; stroke-linecap: round; pointer-events: none; }

/* Energy flow: ribbons take their source's colour. */
.an-svg--flow .an-ribbon { transition: opacity var(--d-value) ease; cursor: pointer; }
.an-ribbon--sun { fill: color-mix(in srgb, var(--sun) var(--an-ribbon), transparent); }
.an-ribbon--battery { fill: color-mix(in srgb, var(--blue) var(--an-ribbon), transparent); }
.an-ribbon--grid { fill: color-mix(in srgb, var(--blue) 18%, transparent); stroke: color-mix(in srgb, var(--blue) 55%, transparent); stroke-width: 1; }
.has-selection .an-ribbon { opacity: 0.25; }
.has-selection .an-ribbon.is-selected { opacity: 1; }
.an-node { pointer-events: none; }
.an-node--sun { fill: var(--sun); }
.an-node--battery { fill: var(--blue); }
.an-node--grid { fill: var(--an-grid); stroke: var(--blue); stroke-width: 1; }
.an-node--house { fill: var(--ink); }
.an-flow-label { font-size: var(--t-small); }
.an-flow-name {
  fill: var(--ink-2);
  font-size: var(--t-label);
  font-weight: var(--w-medium);
  letter-spacing: var(--track-label);
}
.an-flow-value {
  fill: var(--ink);
  font-weight: var(--w-bold);
  font-variant-numeric: tabular-nums;
}

/* Car diary: home charges solid ink, away charges outlined. */
.an-charge { pointer-events: none; }
.an-charge--home { fill: var(--ink); }
.an-charge--away { fill: none; stroke: var(--ink-2); stroke-width: var(--stroke); }

/* Battery: each day's range in the stored-energy blue, sunrise as an ink tick. */
.an-soc-range {
  fill: color-mix(in srgb, var(--blue) 38%, transparent);
  stroke: var(--blue);
  stroke-width: 1;
  pointer-events: none;
}
.an-soc-sunrise { fill: var(--ink); pointer-events: none; }
.an-floor-dot { fill: var(--ink); pointer-events: none; }

/* Solar: capped energy is hatched, the forecast dotted. */
.an-capped { stroke: var(--sun); stroke-width: 1; pointer-events: none; }
.an-hatch-line { stroke: var(--sun); stroke-width: 1.5; }
.an-hatch-line--ink { stroke: var(--ink-2); stroke-width: 1; }
.an-forecast {
  stroke: var(--ink-2);
  stroke-width: var(--stroke);
  stroke-linecap: round;
  pointer-events: none;
}

/* Coverage strip. */
.an-cov { pointer-events: none; }
.an-cov--live { fill: color-mix(in srgb, var(--ink-2) var(--price-tint-neutral), transparent); }
.an-cov--backfill { stroke: var(--ink-2); stroke-width: 1; }
.an-cov--none { fill: none; stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: var(--dash-idle); }

/* --- the period's flow picture ------------------------------------------ */

.an-flow {
  min-width: 0;
}

/* --- sections ----------------------------------------------------------- */

.an-sections {
  border-top: 1px solid var(--line);
}

.an-section {
  border-bottom: 1px solid var(--line);
  min-width: 0;
}

.an-section-header {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  min-height: var(--tap);
  padding: var(--s-3) 0;
  text-align: left;
  color: inherit;
  cursor: pointer;
}
.an-section-header:focus-visible {
  outline: var(--stroke-heavy) solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--r-small);
}
.an-section-header[aria-expanded="true"] .control-section-chevron {
  transform: rotate(180deg);
}

.an-section-text {
  flex: 1;
  display: grid;
  gap: var(--s-1);
  min-width: 0;
}
.an-section-name {
  color: var(--ink-2);
}
.an-section-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: var(--s-3);
  row-gap: var(--s-1);
}
.an-section-value {
  flex: none;
  font-variant-numeric: tabular-nums;
}
.an-section-state {
  min-width: 0;
}
.an-section--planned .an-section-value {
  color: var(--ink-2);
}

.an-section-body {
  display: grid;
  gap: var(--s-2);
  padding: var(--s-2) 0 var(--s-5);
  min-width: 0;
}
.an-section-body[hidden] {
  display: none;
}
.an-section-body > .an-chart {
  margin-top: var(--s-2);
}
.an-section-body > .an-readout {
  margin-bottom: var(--s-2);
}

.an-kv {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-2) 0;
  border-top: 1px solid var(--line);
}
.an-kv-label {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: var(--s-2);
  min-width: 0;
}
.an-kv .an-num {
  flex: none;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.an-kv-note {
  font-variant-numeric: tabular-nums;
}
.an-kv--total .an-num {
  font-size: var(--t-body);
}
.an-kv--planned .an-num {
  color: var(--ink-2);
  font-weight: var(--w-medium);
  padding: 0 var(--s-2);
  border: var(--stroke) dotted var(--line-strong);
  border-radius: var(--r-pill);
}

.an-findings {
  margin: var(--s-3) 0 0;
  padding-left: 1.1em;
  list-style: disc;
  display: grid;
  gap: var(--s-2);
  max-width: 40rem;
}
.an-findings li::marker {
  color: var(--ink-2);
}
.an-findings strong {
  font-weight: var(--w-bold);
}

.an-loss-text {
  color: var(--loss);
}

.an-planned {
  margin-top: var(--s-2);
  padding: var(--s-3) var(--s-4);
  border: var(--stroke) dotted var(--line-strong);
  border-radius: var(--r-small);
  color: var(--ink-2);
}
.an-planned p {
  margin: 0;
}
.an-planned .t-label {
  margin-right: var(--s-1);
}
.an-planned--block {
  display: grid;
  gap: var(--s-2);
  margin-top: 0;
}
.an-planned--block .t-body {
  color: var(--ink);
}

.an-episodes {
  margin: var(--s-2) 0 0;
  padding-left: 1.4em;
  display: grid;
  gap: var(--s-1);
  font-variant-numeric: tabular-nums;
}

.an-source {
  margin: var(--s-3) 0 0;
}

/* --- loading and empty states ------------------------------------------- */

.an--loading {
  gap: var(--s-4);
}
.an-skel { border-radius: var(--r-small); }
.an-skel--head { height: var(--tap); max-width: 22rem; border-radius: var(--r-pill); }
.an-skel--title { height: calc(2 * var(--t-title) * var(--lh-tight)); }
.an-skel--chart { height: 12rem; }
.an-skel--row { height: var(--tap); }

.an--empty {
  gap: var(--s-3);
  padding-top: var(--s-5);
}
.an--empty p {
  margin: 0;
}
.an--empty code {
  font-family: var(--font);
  font-weight: var(--w-bold);
}