/* Portal charts in the Flow language: the classes charts.js emits. Ink for the axes and a single series; the provider
   hues for what is a provider's (a lane, a machine's price, the run's path under a time axis). Axis figures are the
   text face's tabular digits. Every colour is a token from styles.css; marks take their series colour from the
   element's style property (set by charts.js), never from a literal here. */

.chart {
  position: relative;
  margin: 0;
  min-width: 0;
  color: var(--ink);
}

.chart-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-height: 26px;
  margin-bottom: 8px;
}

.chart-title {
  font-size: 14.5px;
  font-weight: 600;
  line-height: 18px;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The table view's toggle is a quiet word at the head's end, always there; pressed, it is in ink with the short rule
   a chosen word wears. */
.chart-toggle {
  position: relative;
  margin-left: auto;
  height: 24px;
  padding: 0 4px;
  font: 500 12.5px/1 var(--font-sans);
  color: var(--ink-3);
  background: transparent;
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
}

.chart-toggle::after {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 0;
  height: 2px;
  background: transparent;
}

@media (hover: hover) { .chart-toggle:hover {
  color: var(--ink);
} }

.chart-toggle[aria-pressed="true"] {
  color: var(--ink);
  font-weight: 600;
}

.chart-toggle[aria-pressed="true"]::after {
  background: var(--ink);
}

.chart-toggle:focus-visible,
.chart-plot:focus-visible,
.chart-legend-item:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.chart-plot {
  position: relative;
  border-radius: var(--radius);
  touch-action: pan-y;
}

.chart-svg {
  display: block;
  max-width: 100%;
  height: auto;
  overflow: visible;
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}

/* Grid and axes: solid hairlines one step off the paper, figures in the muted ink. */
.chart-grid line {
  stroke: var(--rule);
  stroke-width: 1;
  shape-rendering: crispEdges;
}

.chart-grid .chart-zero {
  stroke: var(--edge);
}

.chart-axis text {
  fill: var(--ink-3);
  font-size: 11.5px;
}

/* Marks. */
.chart-line {
  fill: none;
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.chart-line-dashed {
  stroke-dasharray: 5 4;
  stroke-width: 1.5;
}

.chart-point,
.chart-marker {
  stroke: var(--paper);
  stroke-width: 2;
}

.chart-marker {
  pointer-events: none;
}

.chart-bar {
  shape-rendering: geometricPrecision;
}

.chart-band {
  fill: transparent;
}

.chart-band.is-hot {
  fill: var(--paper-2);
}

.chart-cursor {
  stroke: var(--ink-2);
  stroke-width: 1;
  shape-rendering: crispEdges;
  pointer-events: none;
}

.chart-hit {
  fill: transparent;
  cursor: crosshair;
}

/* What Portal saved: the wash between what was paid and what it would have cost. */
.chart-between {
  fill: var(--wash);
  stroke: none;
}

/* The run's path under a time axis: its machines in their colours, an interchange where it moved. */
.chart-track-seg {
  stroke-width: 3;
  stroke-linecap: round;
}

.chart-track-station {
  fill: var(--paper);
  stroke: var(--ink);
  stroke-width: 1.5;
}

/* An event on the time axis: a hairline up through the plot, its words over the plot. */
.chart-event {
  stroke: var(--ink-3);
  stroke-width: 1;
  stroke-dasharray: 2 3;
  shape-rendering: crispEdges;
}

.chart-event.is-bad {
  stroke: var(--bad);
}

.chart-event.is-warn {
  stroke: var(--warn);
}

.chart-svg .chart-event-text {
  fill: var(--ink-2);
  font-size: 12.5px;
  font-stretch: var(--label-stretch);
  font-weight: 550;
}

.chart-svg .chart-event-text.is-bad {
  fill: var(--bad);
}

.chart-svg .chart-event-text.is-warn {
  fill: var(--warn);
}

/* A line's newest value at its end, instead of a legend. */
.chart-end-dot {
  stroke: var(--paper);
  stroke-width: 2;
}

.chart-end-leader {
  stroke: var(--rule-2);
  stroke-width: 1;
  fill: none;
}

.chart-svg .chart-end-text {
  font-size: 12.5px;
  fill: var(--ink-2);
}

.chart-svg .chart-end-value {
  fill: var(--ink);
  font-weight: 600;
}

/* Lanes: a provider's spend per day on its own baseline, every lane on one scale. */
.chart-lane-key {
  stroke-width: 3;
  stroke-linecap: round;
}

.chart-axis .chart-lane-name {
  fill: var(--ink);
  font-size: 13px;
  font-weight: 550;
}

.chart-axis .chart-lane-name.is-total {
  font-weight: 650;
}

.chart-axis .chart-lane-sum {
  fill: var(--ink-2);
  font-size: 12.5px;
}

.chart-axis .chart-lane-tick {
  fill: var(--ink-3);
  font-size: 11px;
}

/* a lane too short for the scale's first round value: a dotted hairline at its own largest day, the figure after it */
.chart-grid .chart-lane-peak {
  stroke: var(--rule-2);
  stroke-dasharray: 2 3;
}

/* Tooltip: one readout for every series at the cursor; values lead, names follow. */
.chart-tip {
  position: absolute;
  z-index: 2;
  min-width: 140px;
  max-width: 280px;
  padding: 7px 10px 8px;
  background: var(--raised);
  border: 1px solid var(--rule-2);
  border-radius: var(--radius-float);
  box-shadow: var(--shadow);
  font-size: 12.5px;
  line-height: 19px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

.chart-tip-x {
  margin-bottom: 3px;
  font-size: 12px;
  color: var(--ink-3);
  white-space: nowrap;
}

.chart-tip-row {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.chart-tip-row.is-current {
  margin: 0 -5px;
  padding: 0 5px;
  background: var(--paper-3);
  border-radius: var(--radius);
}

.chart-tip-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink-2);
}

.chart-tip-value {
  margin-left: 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}

/* an event at the cursor's moment, in its words */
.chart-tip-event {
  margin-top: 3px;
  padding-top: 3px;
  border-top: 1px solid var(--rule);
  font-stretch: var(--label-stretch);
  font-weight: 550;
  color: var(--ink-2);
}

.chart-tip-event.is-bad {
  color: var(--bad);
}

.chart-tip-event.is-warn {
  color: var(--warn);
}

/* Keys: a short stroke for every series, as the path draws a line. Text never wears the series colour. */
.chart-key {
  flex: none;
  display: inline-block;
}

.chart-key-line {
  width: 14px;
  height: 0;
  border-top: 2px solid var(--ink-3);
}

.chart-key-swatch {
  width: 12px;
  height: 3px;
  border-radius: var(--radius-cap);
  background: var(--ink-3);
}

.chart-key-total {
  width: 12px;
  height: 3px;
  border-radius: var(--radius-cap);
  background: var(--ink);
}

/* the saving: the wash it is drawn as, between its two lines */
.chart-key-wash {
  width: 14px;
  height: 9px;
  background: var(--wash);
  border-top: 1.5px dashed var(--ink-3);
  border-bottom: 2px solid var(--ink);
}

/* Legend: present for two or more series; a pressed item is shown, an unpressed one is hidden from the plot. */
.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0 14px;
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
}

.chart-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 24px;
  padding: 0 2px;
  font: 12.5px/1 var(--font-sans);
  color: var(--ink-2);
  background: none;
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
}

@media (hover: hover) { .chart-legend-item:hover {
  color: var(--ink);
} }

.chart-legend-item[aria-pressed="false"] {
  color: var(--ink-3);
  text-decoration: line-through;
}

.chart-legend-item[aria-pressed="false"] .chart-key {
  opacity: .3;
}

/* a phone's chart says its lines' ends in a line over the plot: each line's key, its newest value, what it is */
.chart-ends-over {
  gap: 2px 16px;
  margin: 0 0 4px;
}

.chart-end-item {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-size: 12.5px;
  line-height: 20px;
  color: var(--ink-2);
}

.chart-end-item .chart-key {
  align-self: center;
}

.chart-end-item .chart-end-value {
  color: var(--ink);
  font-weight: 600;
}

.chart-legend-name {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Table view: the same points as an accessible table, a ledger like every other. A long one scrolls in its box, its
   head held, its foot fading while rows lie below; a page's own (Usage's days) grows with the page instead. */
.chart-table {
  max-height: 320px;
  overflow: auto;
  border-top: 1px solid var(--ink);
}

.chart-table[data-more] {
  -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 40px), transparent);
  mask-image: linear-gradient(to bottom, black calc(100% - 40px), transparent);
}

.chart-table.is-grow {
  max-height: none;
  overflow: visible;
}

.chart-table.is-grow .chart-data thead th {
  top: var(--topbar-h);
}

.chart-data {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  line-height: 16px;
  font-variant-numeric: tabular-nums;
}

.chart-data caption,
.chart-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.chart-data th,
.chart-data td {
  padding: 5px 8px;
  text-align: right;
  white-space: nowrap;
  border-bottom: 1px solid var(--rule);
}

.chart-data thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--paper);
  font-size: 12px;
  font-weight: 500;
  font-stretch: var(--label-stretch);
  color: var(--ink-3);
}

.chart-data tbody th {
  font-weight: 400;
  color: var(--ink-2);
}

.chart-data .chart-data-x {
  text-align: left;
  padding-left: 0;
}

.chart-data tbody tr:last-child th,
.chart-data tbody tr:last-child td {
  border-bottom: 0;
}

.chart-empty {
  margin: 0;
  padding: 8px 0;
  color: var(--ink-2);
}

@media (max-width: 899px) {
  .chart-toggle,
  .chart-legend-item {
    min-height: 40px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .chart-toggle,
  .chart-legend-item {
    transition: background-color 140ms, color 140ms, opacity 140ms;
  }
}