/* ===== pe_plot_html (HTML form, scoped) =====
   Loaded eagerly from anvil.yaml native_deps.head_html. Every rule is scoped :where(.pe-plot),
   which adds zero specificity and so cannot change which rule wins inside the card.

   px-card / px-card-header / px-empty-state carry the frame; only the plot's own
   header alignment and canvas sizing live here.

   TWO rules carry a second class and one carries its element type, and they have
   to. As a head asset they lose document-order ties to the dependency's injected
   px-theme-chrome block, so
   .px-card-header { align-items: center } and .px-empty-state { display: flex }
   would win instead: the heading block would stop top-aligning, and the empty box
   would paint under a drawn chart. Doubling the class wins on specificity
   instead, which no file order can undo. The empty-state reveal at the bottom is
   doubled to match, so the base and the reveal keep a one-point gap.

   No designer gate is needed. The only thing hidden here until the script runs is
   an empty state, so the canvas still shows a laid-out card. */

/* The shared card clips its contents (theme.css `.px-card { overflow:
   hidden }`), which cut the chart's own tooltip off at the card edge
   for every dot near a border. Scoped to THIS card only — the estate's
   cards keep their clipping — and paired with the stacking order on
   #pe-plot-section in the parent form, without which the escaped
   tooltip is painted over by the legend and matrix below it.

   The element type is what this rule needs on top of its two classes: the
   dependency's `.px-card:has(> .px-card-header) { overflow: hidden }` is also
   (0,2,0), and as a head asset this file does not win that tie on order.
   `section` makes it (0,2,1). This is the root rule, so it stays a bare selector
   starting a line rather than going inside :where(). */
section.pe-plot.px-card {
  overflow: visible;
}

/* NOT :where()-scoped, deliberately. ApexCharts ships its own stylesheet inside
   apexcharts.min.js and appends it at first chart render, i.e. after every head
   link on the page. Its `.apexcharts-tooltip { z-index: 12 }` is (0,1,0), so
   `:where(.pe-plot) .apexcharts-tooltip` would tie on specificity and LOSE on
   order, dropping the escaped tooltip from 30 to 12 and undoing half of the
   arrangement the un-clip above sets up (un-clip the card, then order the plot
   section above the legend and the matrix). Two classes wins outright. */
.pe-plot .apexcharts-tooltip {
  z-index: 30;
}
/* Every annotation this plot draws is decoration - the dormancy
   triangle, the selection and highlight rings, the median lines - and
   none of them carries a click or a hover of its own. Left alone they
   STEAL the pointer from the dot underneath: ApexCharts paints a
   backing rect behind every annotation label (Annotations
   `annotationsBackground`) and a marker circle for every point
   annotation, and both are hit-testable even when filled
   `transparent`, because a transparent fill is still a painted fill.
   That is what made a dormant home unhoverable - the triangle's own
   backing rect sat over its dot - and it silenced every selected or
   highlighted home too, under the ring. The library already excuses
   the annotation TEXT from the pointer; these two shapes it does not,
   so the whole annotation layer is excused here instead. The
   hand-drawn risk zone joins them: it is a wash and a caption behind
   the dots, and its rect would otherwise swallow every dot inside it.

   These three DO take the scope, unlike the tooltip above: apexcharts.css
   carries no declaration on either plural annotation class (only on the
   `-label` singulars), so at (0,1,0) they compete with nothing and the drop in
   specificity costs nothing. */
:where(.pe-plot) .apexcharts-point-annotations,
:where(.pe-plot) .apexcharts-xaxis-annotations,
:where(.pe-plot) .pe-risk-zone {
  pointer-events: none;
}
:where(.pe-plot) .px-card-header.pe-plot-header {
  align-items: flex-start;
  gap: 1rem;
}
:where(.pe-plot) .pe-plot-heading {
  min-width: 0;
}
:where(.pe-plot) .pe-plot-title {
  font-family: var(--px-font);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--px-text-primary);
  margin: 0;
}
:where(.pe-plot) .pe-plot-subtitle {
  font-family: var(--px-font);
  font-size: 0.78rem;
  color: var(--px-text-muted);
  margin: 0.15rem 0 0;
}
:where(.pe-plot) .pe-plot-body {
  padding: 0.75rem 1rem 1rem;
  position: relative;
}
:where(.pe-plot) .pe-plot-canvas {
  min-height: 460px;
}
:where(.pe-plot) .px-empty-state.pe-plot-empty { display: none; }
:where(.pe-plot).is-empty .pe-plot-canvas { display: none; }
:where(.pe-plot).is-empty .px-empty-state.pe-plot-empty { display: flex; }
:where(.pe-plot) .pe-plot-empty.error .px-empty-text { color: var(--px-danger); }
:where(.pe-plot) .pe-risk-label {
  font-family: var(--px-font);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  fill: var(--pe-declining);
  text-transform: uppercase;
}
:where(.pe-plot) .pe-plot-tip {
  font-family: var(--px-font);
  padding: 0.55rem 0.7rem;
  min-width: 180px;
}
:where(.pe-plot) .pe-plot-tip-name {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--px-text-primary);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.3rem;
}
:where(.pe-plot) .pe-plot-tip-key {
  width: 10px;
  height: 2px;
  border-radius: 1px;
  flex-shrink: 0;
}
:where(.pe-plot) .pe-plot-tip-line {
  font-size: 0.72rem;
  color: var(--px-text-secondary);
  line-height: 1.55;
}
:where(.pe-plot) .pe-plot-tip-line b {
  color: var(--px-text-primary);
  font-weight: 600;
}
:where(.pe-plot) .pe-plot-tip-hint {
  font-size: 0.68rem;
  color: var(--px-text-muted);
  margin-top: 0.3rem;
}